<script setup lang="ts">
import { Handle, Position } from '@vue-flow/core'
defineProps<{
  data: { label: string }
}>();
</script>

<template>
  <div class="container">
    <div class="label">
      {{ data.label }}
    </div>
    <img src="@/assets/tree_root_node_icon.svg" class="icon" style="position: absolute; top: -20px; right: -20px;">
    <Handle :position="Position.Bottom" />
  </div>
</template>

<style scoped lang="scss">
.container {
  background: orange;
  width: 15rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  box-shadow: 0 0 4px 4px orange;

  &:hover {
    border-radius: 0.5rem;
    box-shadow: 0 0 8px 8px orange;
    transition: all 0.2s ease;
    cursor: pointer;
  }
}

.label {
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
}

.vue-flow__handle {
  border-width: 2px;
  width: 0.5rem;
  height: 0.5rem;
  background: orange;
}
</style>
